<template>
	<div class="nav-bar">
		<NavTabs/>
		<NavMenus/>
	</div>
</template>

<script lang="ts" setup>
import {useWebConfigStore} from '@/stores/modules/webConfig.store'
import NavTabs from '@/layouts/components/navBar/components/tabs.vue'
import NavMenus from './components/navMenus.vue'

const webConfigStore = useWebConfigStore()
</script>

<style lang="scss" scoped>
.nav-bar {
	display: flex;
	height: 50px;
	margin: 20px var(--cus-main-space) 0 var(--cus-main-space);

	:deep(.nav-tabs) {
		display: flex;
		height: 100%;
		position: relative;

		.tab-dropdown {
			margin-top: 2px;

			.nav-tab-item {
				align-items: center;
				color: v-bind('webConfigStore.getColorVal("headerBarTabColor")');
				cursor: pointer;
				display: flex;
				justify-content: center;
				padding: 0 20px;
				user-select: none;
				z-index: 1;
				border-radius: var(--el-border-radius-base);

				.close-icon {
					margin: 2px 0 0 4px;
					padding: 2px;
				}

				.close-icon:hover {
					background: var(--el-color-danger);
					border-radius: 50%;
					color: var(--el-border-color-extra-light) !important;
				}

				&.active {
					color: v-bind('webConfigStore.getColorVal("headerBarTabActiveColor")');
					background-color: v-bind('webConfigStore.getColorVal("headerBarTabActiveBackground")');
					box-shadow: 0 0 10px v-bind('webConfigStore.getColorVal("headerBarTabActiveColor")');
					-webkit-transition: all 0.2s;
					transition: all 0.2s;
				}

				&:hover {
					background-color: v-bind('webConfigStore.getColorVal("headerBarHoverBackground")');
					transition: all 0.3s ease;
					transform: translateY(-1px) scale(1.02);
				}
			}
		}
	}
}
</style>
